<style lang="" scoped></style>
<template>
  <div>
    <van-tabs sticky @click-tab="click_tab">
      <!-- 循环根据下方设置生成导航栏     -->
      <van-tab v-for="item in navbar_setting" :title="item.title">
        <template #title>
          {{ item.title }}
          <van-icon v-if="item.icon" :name="icon" />
        </template>
      </van-tab>
    </van-tabs>
    <ProductCard :product_data="product_data"></ProductCard>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from "vue-router";
import { computed, onMounted, ref } from "vue";
import { use_category_store } from "@/stores/category-store";
import ProductCard from "@/components/ProductCard.vue";
// 引入api
import { api_get_product_by_id } from "@/service/api/category";
import { api_get_shop_classify } from "@/service/api/menu";
// 初始化获取数据所需要的id
const category_store = use_category_store();
const $router = useRouter();
const $route = useRoute();

let product_data = ref([]);
const params = {
  project_id: 1,
  limit: 999,
};
let classify_data: any = ref([]);
const get_classify = async () => {
  let res: any = await api_get_shop_classify(params);
  classify_data.value = res.result;
};
const get_category_product = async () => {
  if (!!$route.query.id) {
    const id = Number($route.query.id);
    let res: any = await api_get_product_by_id(id);
    product_data.value = res.result;
  }
  if (!!$route.query.index) {
    await get_classify();
    const index: number = Number($route.query.index);
    const id = classify_data.value[index].id;
    let res: any = await api_get_product_by_id(id);
    product_data.value = res.result;
  }
};

// 顶部导航栏设置

let is_ascending = ref(true);
let icon = computed(() => {
  return is_ascending.value ? "descending" : "ascending";
});
let navbar_setting = [
  {
    id: 1,
    title: "人气",
    icon: false,
  },
  {
    id: 2,
    title: "销量",
    icon: true,
  },
];

const click_tab = (vc) => {
  if (vc.title === "销量") {
    is_ascending.value = !is_ascending.value;
  }
};

onMounted(() => {
  get_category_product();
});
</script>
